<template>
    <el-dialog :title="id == 0 ? '新增模板' : '编辑模板'" :visible="visible" @update:visible="updateVisible" @closed="doCloseEdit" fullscreen>
        <iframe
            v-if="visible"
            id="frame"
            title="frame"
            scrolling="no"
            :style="computedIframeStyle"
            :src="diyUrl"
        />
    </el-dialog>
</template>

<script>
import { requestOpts } from '@/utils/request.js'
export default {
    data() {
        return {
            deviceWidth: 0,
            deviceHeight: 0,
            extendItems: [],
            diyUrl: ''
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: '1'
        },
        id: {
            type: [String, Number],
            default: 0
        },
        folder: {
            type: String,
            default: '0'
        }
    },
    watch: {
        visible(val) {
            if(val) {
                this.init()
            }
        }
    },
    computed: {
        computedIframeStyle() {
            return {
                width: '100%',
                height: this.deviceHeight,
                overflow: 'hidden',
                border: 'none'
            }
        }
    },
    methods: {
        updateVisible(v) {
            this.$emit('update:visible', v)
        },
        doCloseEdit() {
            this.updateVisible(false)
            this.$emit('close')
        },
        init() {
            const h = document.documentElement.clientHeight
            this.deviceHeight = h ? `${h}px` : '100%'
            const token = localStorage.getItem('authorization')
            this.diyUrl =  ((requestOpts.diyUrl).endsWith('/') ? requestOpts.diyUrl : requestOpts.diyUrl  + '/') + 'diy?token=' + token + `&type=${this.type}&id=${this.id}&mfid=${this.folder}`
        }
    }
}
</script>